<script>
    import { getMeterTypeParaList, saveMeterTypeParaList } from '@/api/measuringType.js'
    import addConfig from './addConfig.vue'
    import { findEnumOptions } from '@/api/common.js'
    export default {
        name: 'deviceTypeConfig',
        components: {
            // holdConfig,
            addConfig,
        },
        props: {
            rowData: {
                type: Object,
                default: () => {
                    return {}
                },
            },
            id: {
                type: String,
                default: '',
            },
        },
        data() {
            return {
                listLoading: false,
                tableData: [],
                tagList: [],
            }
        },

        created() {
            this.initSetModal()
            findEnumOptions('meterTypePropertyTag').then((result) => {
                this.tagList = result.data || []
            })
        },

        computed: {},
        mounted() {
            this.getList()

            this.$watch(
                () => this.tableData,
                (newValue = []) => {
                    if (this.$refs.tableRef) {
                        this.$refs.tableRef.tableData = newValue
                        this.$refs.tableRef.updateTableLayout()
                    }
                }
            )
        },
        methods: {
            initSetModal() {
                this.$emit('SetTitle', '配置')
                this.$emit('SetPageWidth', 1200)
                this.$emit('SetPageActions', [
                    {
                        text: '保存',
                        theme: 'primary',
                        handle: () => {
                            if (this.tableData.length > 0) {
                                saveMeterTypeParaList(this.id, this.tableData).then((res) => {
                                    if (res.code === 200) {
                                        this.$emit('Close')
                                    }
                                })
                            } else {
                                this.$message.error('至少配置一条计量属性')
                            }
                        },

                        loading: false,
                    },
                    {
                        text: '取消',
                        theme: 'default',
                        handle: () => {
                            this.$emit('Close')
                        },
                    },
                ])
            },
            transformTagText(tags) {
                const result = (tags || []).map((tag) => {
                    const currentTag = this.tagList.find((item) => item.code === tag)
                    if (currentTag) {
                        return currentTag.name
                    }
                })
                return result.join(',')
            },
            addItem(row) {
                new this.$pageModal(
                    addConfig,
                    {
                        props: {
                            id: this.id,
                            title: '新增',
                            orderNum: this.tableData.length + 1
                                // this.tableData.length > 1
                                //     ? this.tableData[this.tableData.length - 1].orderNum
                                //     : 0,
                        },
                    },
                    (result) => {
                        if (result) {
                            // 缓存
                            this.tableData.push(result)
                        }
                    }
                )
            },

            getList() {
                this.listLoading = false
                this.visible = false

                getMeterTypeParaList(this.id).then((res) => {
                    this.listLoading = false
                    this.tableData = res.data
                })
            },
            //编辑表格
            editClick(row) {
                new this.$pageModal(
                    addConfig,
                    {
                        props: {
                            id: this.id,
                            rowData: row,
                            title: '编辑',
                            orderNum: row.orderNum,
                            // orderNum:
                            //     this.tableData.length > 1
                            //         ? this.tableData[this.tableData.length - 1].orderNum
                            //         : 0,
                        },
                    },
                    (result) => {
                        if (result) {
                            this.tableData = this.tableData.map((item) => {
                                // if (result.id === item.id) {
                                //     return result
                                // } else {
                                //     return item
                                // }
                                if(result.id){
                                    if (result.id === item.id) {
                                        return result
                                    } else {
                                        return item
                                    }
                                } else {
                                    if (result.orderNum === item.orderNum) {
                                        return result
                                    } else {
                                        return item
                                    }
                                }
                            })
                        }
                    }
                )
            },
            //删除属性
            onDeleteClick(row) {
                this.$confirm('您确认要删除数据嘛？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    distinguishCancelAndClose: true,
                    type: 'warning',
                }).then(() => {
                    this.tableData = this.tableData.filter((item) => {
                        // return row.id !== item.id
                        if(row.id){
                            return row.id !== item.id
                        } else {
                            return row.orderNum !== item.orderNum
                        }
                    })
                    this.upDateOrderNum()
                })
            },
            upDateOrderNum(){
                this.tableData = this.tableData.map((item, index) => ({
                    ...item,
                    orderNum: index + 1
                }))
            }
        },
    }
</script>

<template>
    <div style="position: absolute; left: 0; right: 0; bottom: 0; top: 0">
        <RlTable :is-pagination="false" ref="tableRef" :initData="false" :search="false">
            <template #default>
                <el-table-column prop="name" label="属性名称" :width="150" sortable />
                <el-table-column prop="property" label="属性" sortable :width="200" />
                <el-table-column prop="dataType" label="属性数据类型" />
                <el-table-column prop="point" label="测点" />
                <el-table-column prop="master" label="是否是计量属性">
                    <template slot-scope="{ row }">
                        {{ row.master ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column prop="tags" label="标签">
                    <template slot-scope="{ row }">
                        {{ transformTagText(row.tags) }}
                    </template>
                </el-table-column>
                <el-table-column prop="unit" label="单位" />
                <el-table-column fixed="right" label="操作" width="120">
                    <template slot-scope="{ row }">
                        <el-tooltip
                            class="item"
                            effect="light"
                            content="编辑"
                            placement="bottom-start"
                        >
                            <el-button type="text" icon="el-icon-edit" @click="editClick(row)" />
                        </el-tooltip>
                        <el-tooltip
                            class="item"
                            effect="light"
                            content="删除"
                            placement="bottom-start"
                        >
                            <el-button
                                icon="el-icon-delete"
                                type="text"
                                @click="onDeleteClick(row)"
                            />
                        </el-tooltip>
                    </template>
                </el-table-column>
            </template>
            <template #head-left-button>
                <el-button class="filter-item" icon="el-icon-plus" @click="addItem()" size="small">
                    新增
                </el-button>
            </template>
        </RlTable>
    </div>
</template>

<style lang="scss" scoped>
    ::v-deep .rltable {
        background: transparent;
    }
</style>
